<script setup lang="ts">
import { ref } from 'vue';
const isShow = ref(true)
const toggleShow = () => {
  isShow.value = !isShow.value
}
</script>
<template>
  <button @click="toggleShow()" class="btn">开关</button>
  <!-- 
    v-show和v-if的区别：
      1、v-show是显示隐藏，v-if是控制dom节点的生成和销毁。
      2、v-show是直接修改dom元素的display属性，v-if是直接删除dom节点。
  -->
  <!-- 
    v-show 控制的标签，还会保留在页面中，只是被隐藏
    通过 style="display: none;" 不可见，不占位
  -->
  <div v-show="isShow" class="box">v-show条件渲染的盒子</div>
  <!-- 
    v-if 控制的标签，在控制条件为 false 的时候，会被删除（和鸿蒙的 if 条件渲染一致）
  -->
  <div v-if="isShow" class="box">v-if条件渲染的盒子</div>
</template>
<style scoped>
* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

.btn {
  width: 100px;
  height: 80px;
  margin: 20px;
}

.box {
  width: 200px;
  height: 200px;
  background-color: orange;
  margin: 20px;
}
</style>